<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/login.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<a href="./index.html"><img class="login-logo-text" src="./images/login-logo-text.png" alt=""></a>
	<section class="login-content">
		<img src="./images/login-logo.png" alt="">
		<form class="form forget-form layui-form" @submit.prevent>
			<section class="tab">
				<a class="active" href="javascript:;">重置密码</a>
			</section>
			<section>
				<label class="label">
					<input v-model="phone" name="phone" autocomplete="off" lay-verify="phone" lay-reqtext="请输入手机号"  type="text" placeholder="请输入手机号">
					<img src="./images/user-icon.png" alt="">
				</label>
			</section>
			<section>
				<label class="label" style="padding-right: 0;">
					<input autocomplete="off" name="vcode" lay-verify="required" lay-reqtext="请输入验证码"  type="text" placeholder="请输入验证码">
					<a id="getCode" href="javascript:;" @click="getCode">{{ seconds ? seconds + 's' : '获取验证码'}}</a></a>
				</label>
			</section>
			<section>
				<label class="label">
					<input autocomplete="off" name="password" lay-verify="password" type="password" placeholder="请输入新密码">
					<img src="./images/icons/password.png" alt="">
				</label>
			</section>
			<section>
				<label class="label">
					<input autocomplete="off" name="confirmPass" lay-verify="confirmPass" type="password" placeholder="确认密码">
					<img src="./images/icons/password.png" alt="">
				</label>
			</section>
			<button class="login" lay-submit="" lay-filter="submit" type="submit">确定</button>
		</form>

		<transition name="fade">
			<section v-if="showModal" class="invite-modal">
				<img src="./images/icons/success.png" alt="">
				<section class="text">重置密码成功，即将返回登录页</section>
			</section>
		</transition>
	</section>
	<section class="footer">版权所有62016中国电子学会普及工作委员会京JCP备120-41980号</section>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>

<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/ext/reg.js"></script>
<script src="../js/abkj/ext/login.js"></script>
<script src="../js/abkj/ext/vode.js"></script>
<script src="./lib/layui/layui.js"></script>
<script>
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				showModal: false,
				seconds: 0,
				phone: '',
				timer: null,
				form: null
			},
			mounted: function () {
				layui.use(['form', 'layer'], function () {
					vm.form = layui.form
					vm.form.verify({
						//我们既支持上述函数式的方式，也支持下述数组的形式
						//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
						password: function (val) {
							if (!/[^\u4e00-\u9fa5]/.test(val)) return '密码必须是8-16位字母、数字、符号的组合'
							if (val.length < 8) return '密码必须是8-16位字母、数字、符号的组合'
						},
						confirmPass: function (value) {
							if (value !== $('[name=password]').val()) return '两次密码不一致'
						}
					});
					vm.form.on('submit(submit)', function (data) {
						var field = data.field
						chgPassWord({
							phone: data.field.phone,
							newPwd: field.password,
							vcode: field.vcode
						}, function () {
							layui.layer.msg('修改成功', {icon: 1})
							setTimeout(function () {
								location.href = './login.html'
							}, 1500)
						})
					})
				})
			},
			methods: {
				getCode: function () {
					if (this.timer) return
					var vm = this
					getSMSVCode(this.phone, function () {
						vm.seconds = 60
						vm.timer = setInterval(function () {
							vm.seconds--
							if (vm.seconds === 0) {
								clearInterval(vm.timer)
								vm.timer = null
								callback && callback()
							}
						}, 1000)
					}, function (data) {

					})
				}
			}
		})
	})
</script>
</body>
</html>
